<template>
  <div class="step-box">
    <div v-if="toggleFlag">
      <el-row class="custom-id-title">
        客户身份证件照片
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" class="center">
          <div class="papers-photo">
            <el-image :src="frontUrl" :preview-src-list="frontUrlList"></el-image>
          </div>
        </el-col>
        <el-col :span="12" class="center">
          <div class="papers-photo">
            <el-image :src="reverseUrl" :preview-src-list="reverseUrlList"></el-image>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="site-identity-title">
        客户现场照片
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" class="center">
          <div class="peror-photo">
            <img :src=cusSceneUrl alt="">
          </div>
        </el-col>
        <!--<el-col :span="12" class="center">-->
        <!--<div class="peror-photo">-->
        <!--<img :src=idCardUrl alt="">-->
        <!--</div>-->
        <!--</el-col>-->
        <el-col :span="24" class="center" style="padding-top: 15px">
          <el-button type="primary" @click="snapAction">抓拍</el-button>
        </el-col>
      </el-row>
      <el-row class="search-result">
        <el-row :gutter="10" class="per-result">
          <el-col :offset="5" :span="3">联网核查结果：</el-col>
          <el-col :span="16">公民身份证号码与姓名一致，且存在照片</el-col>
        </el-row>
        <el-row :gutter="10" class="per-result">
          <el-col :offset="5" :span="3">人脸识别结果：</el-col>
          <el-col :span="16"><span :class=scoreColor>{{score}}</span>分 <span :class=scoreColor>{{levelRisk}}</span></el-col>
        </el-row>
        <el-row :gutter="10" class="per-result">
          <el-col :offset="5" :span="3">认证结果：</el-col>
          <el-col :span="16" :class=scoreColor>{{onlineResult}}</el-col>
        </el-row>
      </el-row>
      <el-row class="bottom-submit">
        <el-button type="primary" @click="next2to2">确认</el-button>
      </el-row>
    </div>
    <div v-else-if="!toggleFlag">
      <el-row :gutter="20" class="page-box">
        <el-col :span="12" class="left-box">
          <el-row class="left-top view-box">
            <el-scrollbar style="height: 100%;width: 100%;">
              <el-row v-if="flag2to2">
                <el-row class="view-header">卡介质照片</el-row>
                <el-row class="center" style="padding: 10px 10px 0px;">
                  <div class="card-media-photo">
                    <el-image :src="mediaCardUrl" :preview-src-list="mediaCardUrlList"></el-image>
                  </div>
                </el-row>
                <el-row style="text-align: center;line-height: 32px;">
                  <span>卡号：</span>{{bankCardNo}}
                </el-row>
                <el-row style="text-align: center;line-height: 32px;">
                  <span>账户实时状态：</span>{{cardStatus}}
                </el-row>
              </el-row>
              <el-row v-else>
                <el-row class="view-header">
                  客户身份证件照片
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24" class="center" style="margin: 15px 0px 5px;">
                    <div class="papers-photo">
                      <el-image :src="frontUrl" :preview-src-list="frontUrlList"></el-image>
                    </div>
                  </el-col>
                  <el-col :span="24" class="center" style="margin: 5px 0px 0px;">
                    <div class="papers-photo">
                      <el-image :src="reverseUrl" :preview-src-list="reverseUrlList"></el-image>
                    </div>
                  </el-col>
                </el-row>
              </el-row>
              <el-row class="left-bottom">
                <el-row class="cus-info-box">
                  <el-row class="view-header">客户基本信息</el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">姓名：</el-col>
                    <el-col :span="17">{{cusName}}</el-col>
                  </el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">性别：</el-col>
                    <el-col :span="17">{{cusSex}}</el-col>
                  </el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">民族：</el-col>
                    <el-col :span="17">{{cusNationName}}</el-col>
                  </el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">出生年月：</el-col>
                    <el-col :span="17">{{cusBirthDate}}</el-col>
                  </el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">身份证号码：</el-col>
                    <el-col :span="17">{{cusIdentify}}</el-col>
                  </el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">证件有效期：</el-col>
                    <el-col :span="17">{{cusCertTerm}}</el-col>
                  </el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">联系方式：</el-col>
                    <el-col :span="17">{{cusTel}}</el-col>
                  </el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">联系地址：</el-col>
                    <el-col :span="17">{{cusAddress}}</el-col>
                  </el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">大类职业：</el-col>
                    <el-col :span="17" v-if="professionName && professionName.length > 0">{{professionName[0]}}</el-col>
                  </el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">中类职业：</el-col>
                    <el-col :span="17" v-if="professionName && professionName.length > 0">{{professionName[1]}}</el-col>
                  </el-row>
                  <el-row class="cus-info-row">
                    <el-col :span="7" style="text-align: right;">国籍：</el-col>
                    <el-col :span="17">{{cusCountryName}}</el-col>
                  </el-row>
                </el-row>
              </el-row>
            </el-scrollbar>
          </el-row>
        </el-col>
        <el-col :span="12" class="right-box">
          <el-row class="view-box" v-show="flag2to2">
            <el-row class="view-header">客户身份证件照片</el-row>
            <el-row class="view-middle">
              <el-scrollbar style="height: 100%;width: 100%;">
                <el-row :gutter="20">
                  <el-col :span="24" class="center" style="margin: 15px 0px 5px;">
                    <div class="papers-photo">
                      <el-image :src="frontUrl" :preview-src-list="frontUrlList"></el-image>
                    </div>
                  </el-col>
                  <el-col :span="24" class="center" style="margin: 5px 0px 15px;">
                    <div class="papers-photo">
                      <el-image :src="reverseUrl" :preview-src-list="reverseUrlList"></el-image>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-row class="view-header">意愿核实</el-row>
                  <el-row class="verify-item line-height">1.您好，请问您是否为{{ocrCusInfoData.ocrName}}本人？</el-row>
                  <el-row class="verify-item line-height">2.请问您是否自愿在本行办理银行卡激活业务？</el-row>
                  <el-row class="verify-item line-height">3.请确认您提供的开户申请资料是否真实、有效、完整、合法、准确？</el-row>
                  <el-row class="verify-item line-height rules">提示：若客户信息不存在，或者不够完整，可以点击更新客户信息按钮后在下一步进行修改</el-row>
                </el-row>
              </el-scrollbar>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" :disabled="tradePwdFlag" @click="next2to3flag1">设置交易密码</el-button>
              <el-button type="primary" @click="next2to3">更新客户信息</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag2to5">
            <el-row class="view-header">客户信息更新</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src='assets/theme/img/viceoBiz/customer.png' alt="">
                </div>
                <el-row class="photo-title">客户正在更改个人信息</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" @click="next3to3">客户设置成功</el-button>-->
              <!--<el-button type="primary" @click="next3to2">客户设置超限</el-button>-->
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag2to3">
            <el-row class="view-header">客户信息更新</el-row>
            <el-row class="view-middle">
              <el-scrollbar style="margin:0px 0px !important;height: 100%">
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>姓名：</el-col>
                  <el-col :span="14">
                    <el-input size="small" v-model="cusName" :disabled="cusTelFlag"></el-input>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>性别：</el-col>
                  <el-col :span="14">
                    <el-input size="small" v-model="cusSex" :disabled="cusTelFlag"></el-input>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>民族：</el-col>
                  <el-col :span="14">
                    <el-select
                      style="width: 100%;"
                      size="small"
                      clearable
                      v-model="cusNation"
                      :disabled="cusTelFlag"
                      placeholder="请选择"
                      @change="getNationName">
                      <el-option
                        v-for="item in nationOptions"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>出生年月：</el-col>
                  <el-col :span="14">
                    <el-input size="small" v-model="cusBirthDate" :disabled="cusTelFlag"></el-input>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>身份证号码：</el-col>
                  <el-col :span="14">
                    <el-input size="small" v-model="cusIdentify" :disabled="cusTelFlag"></el-input>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>证件有效期：</el-col>
                  <el-col :span="14">
                    <el-input size="small" v-model="cusCertTerm" :disabled="cusTelFlag"></el-input>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>联系地址：</el-col>
                  <el-col :span="14">
                    <el-input size="small" v-model="cusAddress" :disabled="cusTelFlag"></el-input>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>国籍：</el-col>
                  <el-col :span="14">
                    <el-select
                      style="width: 100%;"
                      size="small"
                      clearable
                      v-model="cusCountry"
                      :disabled="cusTelFlag"
                      placeholder="请选择"
                      @change="getCountryName">
                      <el-option
                        v-for="item in cusCountryOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>职业种类：</el-col>
                  <el-col :span="14">
                    <el-cascader
                      ref="professionForm"
                      :disabled="cusTelFlag"
                      v-model="professionValue"
                      size="small"
                      change-on-select
                      style="width: 100%"
                      :options="professionOption"
                      @change="handleProfessFun"
                      :props="{checkStrictly: false}"
                    ></el-cascader>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="8" style="padding-top: 8px;"><span class="rules">*</span>联系电话：</el-col>
                  <el-col :span="14">
                    <el-input size="small" v-model="cusTel" :disabled="cusTelFlag"></el-input>
                  </el-col>
                </el-row>
                <el-row class="verify-item-ocr">
                  <el-col :span="24" v-show="cusTelFlag" style="padding: 8px 0px;">
                    <span>{{callinTime}}</span>
                  </el-col>
                  <el-col class="txt-left rules" :span="24" style="line-height: 24px">
                    注：带有*号的输入框为必填项，请输入内容，否则无法进行下一步
                  </el-col>
                </el-row>
                <el-row class="code-icon-fail" v-show="codeFailFlag">
                  <el-col :offset="6">
                    <i class="el-icon-circle-close"></i><span class="code-padding">短信验证失败</span>
                  </el-col>
                </el-row>
                <el-row class="code-icon-success" v-show="codeSuccessFlag">
                  <el-col :offset="6"><i class="el-icon-success"></i><span class="code-padding">短信验证成功</span>
                  </el-col>
                </el-row>
              </el-scrollbar>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="sendVerificationCode('cusCode')" :disabled="cusTelFlag">更新客户信息</el-button>
              <el-button type="primary" @click="sendVerificationCode('msgCode')" :disabled="cusTelFlag">发送验证码</el-button>
              <!--<el-button type="primary" @click="sendToCusInfo">客户信息发送给客户验证</el-button>-->
              <!--<el-button type="primary" @click="sendCodeSuccess">短信验证成功</el-button>-->
              <!--<el-button type="primary" @click="sendCodeFail">短信验证失败</el-button>-->
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag2to4">
            <el-row class="view-header">客户信息更新</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="pass-photo">
                  <img src='assets/theme/img/viceoBiz/success.png' alt="">
                </div>
                <el-row class="photo-title">短信验证成功</el-row>
                <el-row class="photo-title">客户信息更新提交成功</el-row>
              </el-row>
              <!--<el-row style="padding: 0px 30px;margin-top: 250px;">-->
                <!--<el-col class="txt-left rules" :span="24" style="line-height: 24px">-->
                  <!--提示：请再次核对客户基本信息，如有错误请点击上一步进行修改-->
                <!--</el-col>-->
              <!--</el-row>-->
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" @click="prev2to4">上一步</el-button>-->
              <el-button type="primary" @click="next2to4">设置交易密码</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag3to1">
            <el-row class="view-header">设置交易密码</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src='assets/theme/img/viceoBiz/coding.png' alt="">
                </div>
                <el-row class="photo-title">客户正在设置交易密码</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" @click="next3to3">客户设置成功</el-button>-->
              <!--<el-button type="primary" @click="next3to2">客户设置超限</el-button>-->
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag3to2">
            <el-row class="view-header">设置交易密码</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="exceed-photo">
                  <img src='assets/theme/img/viceoBiz/inputExceeded.png' alt="">
                </div>
                <el-row class="photo-title">客户交易密码设置超限</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag3to3">
            <el-row class="view-header">设置交易密码</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src='assets/theme/img/viceoBiz/success.png' alt="">
                </div>
                <el-row class="photo-title">客户交易密码设置成功</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag4to1">
            <el-row class="view-header">选择开通业务</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="open-biz-photo">
                  <img src='assets/theme/img/viceoBiz/openBizing.png' alt="">
                </div>
                <el-row class="photo-title">客户正在选择开通业务</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" @click="next4to2">客户端提交</el-button>-->
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag4to2">
            <el-row class="view-header">选择开通业务</el-row>
            <el-row class="view-middle">
              <el-row class="open-biz-item">
                <el-checkbox v-model="openBizData.item1" disabled>ATM自助转账功能</el-checkbox>
              </el-row>
              <el-row class="open-biz-item">
                <el-col :span="6">单日转账限额（元）：</el-col>
                <el-col :span="18">{{openBizData.item2}}</el-col>
              </el-row>
              <el-row class="open-biz-item">
                <el-checkbox v-model="openBizData.item3" disabled>互联网在线支付功能</el-checkbox>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next4to1">重新选择业务</el-button>
              <el-button type="primary" @click="next4to3">确认</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag4to3">
            <el-row class="view-header">告知书</el-row>
            <el-row class="view-middle">
              <el-scrollbar style="height: 250px">
                <el-row class="view-middle-header" style="padding: 20px">
                  <el-row class="notification-title line-height" style="text-align: center;padding-bottom: 10px">
                    开设个人银行结算账户涉通讯网络新型违法犯罪法律责任及防范提示告知书
                  </el-row>
                  <el-row style="text-indent:30px;">
                    <p class="line-height">
                      为加强银行结算账户(以下称“账户”)管理，保证自然人合法、规范开立和使用个人账户，避免被违法犯罪人员用于转移通讯网络新型违法犯罪赃款，根据最高人民法院、最高人民检察院、公安部 《关于办理电信网络诈骗等刑事案件适用法律若干问题的意见》（法发【2016】32号）、《人民币银行结算账户管理办法》（中国人民银行令【2003】第5号）和中国人民银行《关于加强支付结算管理防范电信网络新型违法犯罪有关事项的通知》（银发【2016】261号）等文件之规定，现将相关涉通讯网络新型违法犯罪法律责任及防范提示告知如下:</p>
                    <p class="line-height">一、自然人申请开立个人账户时，应按照现行账户管理制度规定提供真实有效身份证件，并如实填写个人相关信息。违者将按相关账户管理制度规定进行处罚；构成犯罪的，移交司法机关依法追究刑事责任。</p>
                    <p class="line-height">
                      二、自然人申请开立个人账户时，严禁假冒他人身份或者虚构代理关系开立银行帐户，自然人应妥善保管自身名下所有账户，充分了解账户管理和信用风险，严禁出租、出借、出售、购买银行账户。违者将按相关账户管理制度规定，5年内暂停其个人账户非柜面业务，3年内不得为其新开立账户，同时其个人信息将被移送金融信用信息基础数据库并向社会公布。</p>
                    <p class="line-height">三、对明知他人实施电信网络诈骗犯罪，提供信用卡、资金支付结算账户的个人，根据相关法律制度规定，以共同犯罪论处。</p>
                    <p class="line-height">四、自然人申请开立个人账户时务必提高防范通讯网络新型违法犯罪意识，如遇到以下情形，应立即停止开户，并向银行工作人员提出帮助请求：</p>
                    <p class="line-height">（一）自称“公安、检察、法院、海关”等各类执法人员，要求你将资金转移至“安全账户”的；</p>
                    <p class="line-height">（二）自称你的“家人、朋友、熟人、领导、老师、医生、恋人”等各类关系人，要求你进行存钱、汇款或转账的；</p>
                    <p class="line-height">（三）自称可以为你办理“退货、退税、退票、发放补贴、领奖、积分兑换、提高信用卡额度、刷信誉返利、低息高额贷款”等各类“获利”行为，要求你进行存钱、汇款或转账的；</p>
                    <p class="line-height">（四）使用“举报信、PS照片、黑社会报复”等各类威胁手段，要求你进行存钱、汇款或转账的。</p>
                    <p class="line-height">（五）其他可疑情形。</p>
                    <p class="line-height">五、如有任何涉通讯网络新型违法犯罪疑问，请咨询江苏省反通讯网络诈骗中心的24小时专线025-83526546。</p>
                    <p class="line-height">开户申请人已清楚明确阅读上述各项开立、使用银行结算账户涉电信网络新型违法犯罪法律责任及防范提示告知内容，将依法开立、使用并妥善保管个人银行结算账户。</p>
                    <p class="line-height">开户申请人：</p>
                    <p class="line-height" style="float: right">年  月  日</p>
                  </el-row>
                </el-row>
              </el-scrollbar>
              <el-row class="view-middle-bottom">
                <el-row class="view-header">意愿核实</el-row>
                <el-scrollbar style="height: 290px">
                  <el-row class="verify-item line-height">1.请问您是否已认真阅读《开设个人结算账户涉通讯网络新型违法犯罪法律责任及防范提示告知书》及相关责任条款？</el-row>
                  <el-row class="verify-item line-height">2.请问您是否已完全理解并接受相关定义、须知、章程、功能说明及责任条款等全部内容并自愿受其法律约束？</el-row>
                  <el-row class="verify-item line-height">
                    3.银行账户严禁出租、出借、出售、购买，违者将按相关账户管理制度规定，5年内暂停个人账户非柜面业务、支付账户所有业务，不得新开立账户，同时您的个人信息将被移送金融信用信息基础数据库并向社会公布。请问您是否知晓？
                  </el-row>
                </el-scrollbar>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next5to1" :disabled="bizConfirmFlag">确认</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag5to1">
            <el-row class="view-header">提交申请</el-row>
            <el-row class="view-middle">
              <el-row style="padding: 20px 0 20px 0; text-align:center; font-weight: bold;">业务确认单</el-row>
              <el-row style="padding: 0 40px 0 40px">
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">交易类型：</el-col>
                  <el-col :span="12">{{bizCertData.businessType}}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">交易时间：</el-col>
                  <el-col :span="12">{{transTime}}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">卡号：</el-col>
                  <el-col :span="12">{{bankCardNo}}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">户名：</el-col>
                  <el-col :span="12">{{cusName}}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">身份证号码：</el-col>
                  <el-col :span="12">{{cusIdentify}}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">联系电话：</el-col>
                  <el-col :span="12">{{cusTel}}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">ATM自助转账功能：</el-col>
                  <el-col :span="12">{{openBizData.item1 ? '开通' : '未开通'}}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">单日转账限额（元）：</el-col>
                  <el-col :span="12">{{openBizData.item2}}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="8" :offset="4">互联网在线支付功能：</el-col>
                  <el-col :span="12">{{openBizData.item3 ? '开通' : '未开通'}}</el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="1" :offset="4">
                    <el-checkbox :checked="true">
                    </el-checkbox>
                  </el-col>
                  <el-col :span="17">本人已仔细核对激活的账户信息及联系电话，
                    同时已设置账户密码，确认上述内容与本人申请办理业务的内容一致
                  </el-col>
                </el-row>
                <el-row style="padding-bottom: 10px">
                  <el-col :span="24" :offset="4">客户签名：</el-col>
                  <el-col :span="16" :offset="4" class="sign-style">
                    <img :src="cusSignUrl" alt="">
                  </el-col>
                </el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" v-show="reSignFlag" @click="reSignAction">重新签名</el-button>
              <el-button type="primary" v-show="bizFormFlag" :disabled="bizFromConfirmFlag" @click="bizFromConfirmAction">确认</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag5to2">
            <el-row class="view-header">提交申请</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src='assets/theme/img/viceoBiz/cardFail.png' alt="">
                </div>
                <el-row class="photo-title">卡激活失败</el-row>
                <el-row class="photo-title">失败原因：{{failReason}}</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag5to3">
            <el-row class="view-header">提交申请</el-row>
            <el-row class="view-middle">
              <el-row class="view-middle-header">
                <el-row style="padding-top: 70px;">
                  <div class="success-photo">
                    <img src='assets/theme/img/viceoBiz/success.png' alt="">
                  </div>
                  <el-row class="photo-title">卡激活成功</el-row>
                </el-row>
              </el-row>
              <el-row class="view-middle-bottom">
                <el-row class="view-header">业务提示</el-row>
                <el-row class="verify-item line-height">
                  您此次激活的{{cardName}}不支持办理银联等业务，如ATM存取款、POS机刷卡、绑定苏E行，如需开通此类业务，请您本人携带身份证和卡介质至银行柜面或者超柜办理“社保卡/借记卡有效期获取”。
                </el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" disabled>办理其他业务</el-button>-->
              <el-button type="primary" @click="next6to1">生成凭证表单</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag6to1">
            <el-row class="view-header">凭证签名</el-row>
            <el-row class="view-middle">
              <!--<BizCertForm :data="bizCertData"></BizCertForm>-->
              <el-scrollbar style="height: 100%">
                <div class="confirmTable" id="bizCertCanvas">
                  <el-row class="confirmTitle">苏州农商行远程银行电子凭证</el-row>
                  <el-row class="confirmTableBody">
                    <el-row class="border-bottom-bold-style">
                      <el-col class="padding-style" :span="6">电子凭证流水号：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{bizCertData.coreSeqNo}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style word-border-style" :span="24">客戶信息</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">姓名：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{bizCertData.name}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">民族：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{bizCertData.nation}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">证件类型：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{bizCertData.certType}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">证件号码：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{bizCertData.idNum}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">联系电话：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{bizCertData.tel}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="10">联系地址/常用地址：</el-col>
                      <el-col class="padding-style txt-right" :span="14">{{bizCertData.address}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">大类职业：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{bizCertData.profession}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">中类职业：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{bizCertData.childProFession}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="6">国籍：</el-col>
                      <el-col class="padding-style txt-right" :span="18">{{bizCertData.country}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style word-border-style" :span="24">证件信息</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="24">正面照</el-col>
                      <el-col class="padding-style txt-right" style="height: 150px" :span="24">
                        <img :src="frontBase64" style="height:100%;float:left;">
                      </el-col>
                    </el-row>
                    <el-row class="border-bottom-bold-style">
                      <el-col class="padding-style" :span="24">反面照</el-col>
                      <el-col class="padding-style txt-right" style="height: 150px" :span="24">
                        <img :src="reverseBase64" style="height:100%;float:left;">
                      </el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style word-border-style" :span="24">核查结果</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="10">联网核查结果：</el-col>
                      <el-col class="padding-style txt-right" :span="14">公民身份证号码与姓名一致，且存在照片</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style" :span="10">人脸识别分数：</el-col>
                      <el-col class="padding-style txt-right" :span="14">{{bizCertData.faceScore}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-bold-style">
                      <el-col class="padding-style" :span="10">活体检测结果：</el-col>
                      <el-col class="padding-style txt-right" :span="14">{{bizCertData.liveResult}}</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style word-border-style" :span="10">业务办理信息</el-col>
                      <el-col class="padding-style txt-right" :span="14"></el-col>
                    </el-row>
                    <el-row class="border-bottom-style" v-show="bizCertData.informationMaintenance">
                      <el-col class="padding-style" :span="10">信息维护</el-col>
                      <el-col class="padding-style txt-right" :span="14"></el-col>
                    </el-row>
                    <el-row class="border-bottom-bold-style">
                      <el-col class="padding-style" :span="14">{{bizCertData.businessType}}</el-col>
                      <el-col class="padding-style txt-right" :span="10"></el-col>
                    </el-row>
                    <el-row class="border-bottom-bold-style" v-show="openBizData.item1">
                      <el-col class="padding-style" :span="24">ATM自助转账签约</el-col>
                    </el-row>
                    <el-row class="border-bottom-bold-style" v-show="openBizData.item3">
                      <el-col class="padding-style" :span="24">互联网支付签约</el-col>
                    </el-row>
                    <el-row class="border-bottom-style">
                      <el-col class="padding-style word-border-style" :span="24">客户签名</el-col>
                      <el-col class="padding-style txt-right" style="height: 180px" :span="24">
                        <img :src="cusSignBase64" style="height:100%;float:left;">
                      </el-col>
                    </el-row>
                  </el-row>
                  <el-row class="confirmTableBFooter">
                    <el-row>
                      <el-col :span="5" class="footer-style">经办人：</el-col>
                      <el-col :span="6" class="footer-style">{{bizCertData.manager}}</el-col>
                      <el-col :span="5" class="footer-style">经办人工号：</el-col>
                      <el-col :span="8" class="footer-style">{{bizCertData.managerNum}}</el-col>
                    </el-row>
                  </el-row>
                </div>
              </el-scrollbar>
            </el-row>
            <el-row class="view-bottom">
              <!--<el-button type="primary" v-show="sendSignFlag" @click="sendBizCertToClient">发送给客户</el-button>-->
              <!--<el-button type="primary" v-show="submitResultFlag" @click="next6to2">提交</el-button>-->
              <el-button type="primary" @click="next6to3">生成电子凭证</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag6to2">
            <el-row class="view-header">凭证签名</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src='assets/theme/img/viceoBiz/success.png' alt="">
                </div>
                <el-row class="photo-title">电子凭证生成成功，请结束交易</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag6to3">
            <el-row class="view-header">提交凭证</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src='assets/theme/img/viceoBiz/cardFail.png' alt="">
                </div>
                <el-row class="photo-title">电子凭证提交失败</el-row>
                <el-row class="photo-title">失败原因：{{certFailReason}}</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flagEnd">
            <el-row class="view-header">交易结束</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="exceed-photo">
                  <img src='assets/theme/img/viceoBiz/ending.png' alt="">
                </div>
                <el-row class="photo-title">交易结束</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
            </el-row>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="page-bottom" style="text-align: left" v-show="endTransFlag">
        <el-button type="primary" @click="nextEnd">结束交易</el-button>
      </el-row>
    </div>
    <el-dialog
      title="凭证预览"
      :visible.sync="dialogVisible">
      <el-scrollbar style="height: 600px">
        <img :src="bizCertUrl" alt="">
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadFileFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import Axios from 'axios'
  import html2canvas from 'html2canvas'
  import BizCertForm from '@/views/videoBiz/xiaochengxu/forOpenHouse/bizCertForm'
  import {
    nationDicList,
    queryCusSenceScore,
    queryCusInfo,
    updateCusInfo,
    imgTransBase64,
    uploadFile,
    sendCodeMessage,
    ocrBankCard,
    submitBizForm,
    socialCardActive,
    onlinePayOpen,
    submitBizCert,
    saveTransPipeline
  } from '@/api/videoBiz/videoBiz'

  export default {
    name: 'cardVideo',
    components: {
      BizCertForm
    },
    data() {
      return {
        frontUrl: 'assets/theme/img/viceoBiz/frontPhoto.png',
        reverseUrl: 'assets/theme/img/viceoBiz/reversePhoto.png',
        cusSceneUrl: 'assets/theme/img/viceoBiz/perpr.png',
        cusSceneName: '',
        mediaCardUrl: 'assets/theme/img/viceoBiz/cardMedia.png',
        frontUrlList: [],
        reverseUrlList: [],
        mediaCardUrlList: [],
        cusSignUrl: '',
        frontName: '',
        reverseName: '',
        mediaCardName: '',
        frontBase64: '',
        reverseBase64: '',
        mediaCardBase64: '',
        cusSignBase64: '',
        bankCardNo: '',
        cardType: '2',
        cardName: '借记卡',
        khflag: '0',
        clientFlag: true,
        tellerNo: '',
        /**************** 联网核查结果 ******************/
        // 分数
        score: 0,
        levelRisk: '高风险',
        scoreColor: 'redColor',
        // 核查结果
        onlineResult: '由坐席确认是否通过',
        // 卡激活状态
        cardStatus: '借记卡未激活',
        toggleFlag: true,
        isUpdateFlag: false,
        tradePwdFlag: false,
        flag2to2: true,
        flag2to3: false,
        flag2to4: false,
        flag2to5: false,
        flag3to1: false,
        flag3to2: false,
        flag3to3: false,
        flag4to1: false,
        flag4to2: false,
        flag4to3: false,
        flag5to1: false,
        flag5to2: false,
        flag5to3: false,
        flag6to1: false,
        flag6to2: false,
        flag6to3: false,
        flagEnd: false,
        endTransFlag: true,
        reSignFlag: false,
        bizFormFlag: false,
        sendSignFlag: true,
        submitResultFlag: true,
        cusAddressFlag: false,
        cusTelFlag: false,
        callinTime: '60s后可发送',
        timer: '',
        codeFailFlag: false,
        // 短信验证码是否成功
        codeSuccessFlag: false,
        // 开通业务选项
        openBizData: {
          item1: false,
          item2: 0,
          item3: false
        },
        // 卡激活失败原因
        failReason: '',
        cardActiveFlag: false,
        // 交易时间
        transTime: '',
        // 业务确认单按钮
        bizConfirmFlag: true,
        bizFromConfirmFlag: false,
        dialogVisible: false,
        bizCertUrl: '',
        bizCertName: '',
        bizCertSeqNo: '',
        certFailReason: '',
        // 业务凭证表单
        bizCertData: {
          // 流水号
          'coreSeqNo': '',
          // 姓名
          'name': '',
          // 证件类型
          'certType': '身份证',
          // 证件号码
          'idNum': '',
          // 民族
          'nation': '',
          // 联系电话
          'tel': '',
          // 大类职业
          'profession': '',
          // 中类职业
          'childProFession': '',
          // 国籍
          'country': '',
          // 联系地址
          'address': '',
          // 正面照
          'frontPhoto': this.frontBase64,
          // 反面照
          'backPhoto': this.reverseBase64,
          // 联网核查结果
          'onlineResult': this.onlineResult,
          // 人脸识别分数
          'faceScore': this.score,
          // 活体检测结果
          'liveResult': '',
          // 信息维护
          'informationMaintenance': this.isUpdateFlag,
          // 业务类型
          'businessType': sessionStorage.getItem('businessType'),
          // 客户签名
          'signUrl': '',
          // 经办人
          'manager': '',
          // 经办人工号
          'managerNum': ''
        },
        ocrCusInfoData: {
          ocrName: '',
          ocrSex: '',
          ocrNation: '',
          ocrBirthDate: '',
          ocrIdentify: '',
          ocrCertTerm: '',
          ocrAddress: ''
        },
        oldsmkkh: '',
        lcybh: '',
        branchCode: '',
        cusCountryOptions: window.DICJSON.COUNTRY,
        professionOption: window.DICJSON.PROFESSION,
        professionValue: [],
        professionName: [],
        cusName: '',
        cusSex: '',
        cusNation: '',
        cusNationName: '',
        cusBirthDate: '',
        cusIdentify: '',
        cusCertTerm: '',
        cusTel: '',
        cusAddress: '',
        cusCountry: 'CHN',
        cusCountryName: '中国',
        nationOptions: []
      }
    },
    created() {

    },
    mounted() {
      /********************************** 小程序交互信令 ****************************************/
      let self = this
      // 调用民族字典
      self.nationDicFun()
      // 收到结束会话
      window.eventEmitter.$on('EventVideoChatDone', () => {
        if ('小程序卡激活' == sessionStorage.getItem('videoCallType')) {
          self.nextEnd()
        }
      })
      // 视频进线
      window.eventEmitter.$on('EventVideoRing', (data) => {
        // 初始化按钮
        self.toggleFlag = true
        self.endTransFlag = true
        self.flagEnd = false
        self.flag2to2 = true
        self.resetGlobalVarible()
        self.nextStep(1)
        if (data.frontIDCard) {
          self.frontName = data.frontIDCard
          self.frontUrl = window.CONFIG.fileServer + '/get?filename=' + data.frontIDCard
          self.frontUrlList.push(self.frontUrl)
        }
        if (data.reverseIDCard) {
          self.reverseName = data.reverseIDCard
          self.reverseUrl = window.CONFIG.fileServer + '/get?filename=' + data.reverseIDCard
          self.reverseUrlList.push(self.reverseUrl)
        }
        if (data.mediaCard) {
          self.mediaCardName = data.mediaCard
          self.mediaCardUrl = window.CONFIG.fileServer + '/get?filename=' + data.mediaCard
          self.mediaCardUrlList.push(self.mediaCardUrl)
        }
        // 获取客户端ocr识别的客户信息
        if (data.customerInfo) {
          self.ocrCusInfoData.ocrName = data.customerInfo.name
          self.ocrCusInfoData.ocrSex = data.customerInfo.sex
          self.ocrCusInfoData.ocrNation = data.customerInfo.nation
          self.ocrCusInfoData.ocrBirthDate = data.customerInfo.birth
          self.ocrCusInfoData.ocrIdentify = data.customerInfo.idCardNo
          self.ocrCusInfoData.ocrCertTerm = data.customerInfo.validDate
          self.ocrCusInfoData.ocrAddress = data.customerInfo.address
        }
        self.bankCardNo = data.bankCardNo
        self.khflag = data.cardStatus // 开户标志
        self.cardType = data.cardType // 卡类型（借记卡、社保卡）
        self.oldsmkkh = data.oldsmkkh // 老市民卡卡号
        self.lcybh = data.DepClctrNo  // 揽存员编号
        self.branchCode = data.DepClctrBrId  // 揽存员机构号
        sessionStorage.setItem('idCardNo', data.idCardNo) // 身份证号
        sessionStorage.setItem('bankCardNo', data.bankCardNo) // 卡号
        sessionStorage.setItem('customerNo', data.customerNo) // 客户号
        sessionStorage.setItem('customerName', data.customerName) // 客户姓名
        sessionStorage.setItem('businessType', data.businessType) // 业务类型
        sessionStorage.setItem('openingBank', data.openingBank) // 开户行
        sessionStorage.setItem('videoCallType', '小程序卡激活')   // 卡激活标识
        // 社保卡
        if ('1' == data.cardType) {
          self.cardName = '社保卡'
          if ('0' == data.cardStatus) {
            self.cardStatus = '未开户未激活'
          } else if ('1' == data.cardStatus) {
            self.cardStatus = '已开户未激活'
          } else if ('2' == data.cardStatus) {
            self.cardStatus = '已开户已激活'
          }
        }
        // 借记卡
        else {
          self.cardName = '借记卡'
          if ('0' == data.cardStatus) {
            self.cardStatus = '可收可付'
          } else if ('1' == data.cardStatus) {
            self.cardStatus = '只收不付'
          } else if ('2' == data.cardStatus) {
            self.cardStatus = '只付不收'
          } else if ('3' == data.cardStatus) {
            self.cardStatus = '不收不付'
          } else if ('a' == data.cardStatus) {
            self.cardStatus = '借记卡未激活'
          } else if ('b' == data.cardStatus) {
            self.cardStatus = '借记卡已激活'
          } else if ('c' == data.cardStatus) {
            self.cardStatus = '只收不付，涉案客户其他账户'
          } else if ('d' == data.cardStatus) {
            self.cardStatus = '只收不付，开户6个月无交易'
          }
        }
      })
      // 收到拍照成功
      window.eventEmitter.$on('EventSnapSuccess', (data) => {
        self.cusSceneUrl = data.snapUrl
        let cusSceneBlob = Utils.dataURLtoBlob(this.cusSceneUrl)
        let formData = new FormData()
        formData['enctype'] = 'multipart/form-data'
        formData.append('file', cusSceneBlob)
        uploadFile(formData).then(response => {
          this.cusSceneName = response.data
        }).catch(error => {
          console.log(error)
        })
        self.queryCusSenceScoreFun(data.snapUrl)
      })
      // 收到短信验证码成功
      window.eventEmitter.$on('EventSmsCodeSuccess', () => {
        self.codeSuccessFlag = false
        self.codeFailFlag = false
        // 更新客户信息
        self.addAndUpdateCusInfoFun()
        // 清除定时器
        window.clearInterval(self.timer)
      })
      // 收到短信验证码失败
      window.eventEmitter.$on('EventSmsCodeFail', () => {
        self.codeSuccessFlag = false
        self.codeFailFlag = true
      })
      // 收到客户确认的客户信息
      window.eventEmitter.$on('EventCusInfoConfirm', (data) => {
        self.cusName = data.customerName
        self.cusSex = data.sex
        self.cusNation = data.nation
        self.cusNationName = data.cusNationName
        self.cusBirthDate = data.birth
        self.cusIdentify = data.idCardNo
        self.cusCertTerm = data.validDate
        self.cusAddress = data.address
        self.cusTel = data.tel
        self.professionValue = [data.profession, data.childProFession]
        self.cusCountry = data.country
        self.professionName = [data.professionName, data.childProFessionName]
        self.cusCountryName = data.countryName
        sessionStorage.setItem('customerName', self.cusName)
        sessionStorage.setItem('idCardNo', self.cusIdentify)
        sessionStorage.setItem('contactTel', self.cusTel)
        sessionStorage.setItem('contactAdr', self.cusAddress)
        self.flag2to3 = true
        self.flag2to5 = false
        self.cusTelFlag = false
        // self.flag2to3 = false
        // self.flag2to4 = true
      })
      // 收到客户取消的客户信息
      window.eventEmitter.$on('EventCusInfoCancel', () => {
        window.globalUiKit.notify('提示', '客户信息更新验证失败，请重新验证！', 'info')
        self.codeSuccessFlag = false
        self.codeFailFlag = false
        self.cusTelFlag = false
        window.clearInterval(self.timer)
      })
      // 收到客户设置交易密码超限或失败
      window.eventEmitter.$on('EventSetPassFail', () => {
        self.next3to2()
      })
      // 收到客户设置交易密码成功
      window.eventEmitter.$on('EventSetPassSuccess', (data) => {
        sessionStorage.setItem('password', data.password)
        self.next3to3()
      })
      // 收到客户端提交的开通业务内容
      window.eventEmitter.$on('EventOpenBizSubmit', (data) => {
        self.next4to2()
        // ATM自助转账功能
        self.openBizData.item1 = data.item1
        // 单日转账限额（元）
        self.openBizData.item2 = data.item2
        // 互联网在线支付功能
        self.openBizData.item3 = data.item3
      })
      // 收到客户端确认阅读告知书
      window.eventEmitter.$on('EventNotificationRead', () => {
        self.bizConfirmFlag = false
      })
      // 客户提交签名
      window.eventEmitter.$on('EventCusSignSubmit', (data) => {
        // 客户签名照片
        self.cusSignUrl = window.CONFIG.fileServer + '/get?filename=' + data.signPhoto
        self.transTime = data.transTime
        self.signSubmitAction()
        imgTransBase64(data.signPhoto).then(response => {
          this.cusSignBase64 = response.data
        }).catch(error => {
          console.log(error)
        })
      })
      // 收到客户端确认业务凭证
      window.eventEmitter.$on('EventBizCertConfrim', () => {
        self.sendSignFlag = false
        self.submitResultFlag = true
      })
    },
    methods: {
      // 抓拍客户现场照
      snapAction() {
        globalUserData.sendSnap()
      },
      // 步骤条步进
      nextStep(index) {
        this.$emit('nextStep', index)
      },
      // 步骤2-2
      next2to2() {
        if (parseFloat(this.score) >= 0.9) {
          this.next2to2Fun()
        } else {
          this.$confirm('此客户为高风险客户，请确认是否通过？', '系统提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
          }).then(() => {
            this.next2to2Fun()
          }).catch(() => {

          })
        }
      },
      next2to2Fun() {
        this.toggleFlag = false
        // 客户基本信息
        this.queryCusInfoFun(sessionStorage.getItem('customerNo'))
        // 客户照片转Base64
        this.imgTransBase64Fun()
      },
      // 步骤2-3
      next2to3() {
        // 客户信息是否需要更新
        let cusObj = {
          'customerName': this.cusName,
          'sex': this.cusSex,
          'nation': this.cusNation,
          'cusNationName': this.cusNationName,
          'birth': this.cusBirthDate,
          'idCardNo': this.cusIdentify,
          'validDate': this.cusCertTerm,
          'address': this.cusAddress,
          'tel': this.cusTel,
          'profession': this.professionValue[0],
          'childProFession': this.professionValue[1],
          'country': this.cusCountry,
          'professionName': this.professionName[0],
          'childProFessionName': this.professionName[1],
          'countryName': this.cusCountryName
        }
        this.flag2to2 = false
        this.flag2to5 = true
        this.isUpdateFlag = true
        globalUserData.sendWillingVerifySuccess(cusObj)
      },
      // 设置交易密码
      next2to3flag1() {
        this.flag2to2 = false
        this.flag3to1 = true
        this.nextStep(2)
        // 设置交易密码
        globalUserData.sendSetPass()
      },
      // 发送验证码
      sendVerificationCode(code) {
        this.codeSuccessFlag = false
        this.codeFailFlag = false
        if (!this.cusName) {
          window.globalUiKit.notify('提示', '姓名不能为空！', 'info')
          return false
        } else if (!this.cusSex) {
          window.globalUiKit.notify('提示', '性别不能为空！', 'info')
          return false
        } else if (!this.cusNation) {
          window.globalUiKit.notify('提示', '民族不能为空！', 'info')
          return false
        } else if (!this.cusBirthDate) {
          window.globalUiKit.notify('提示', '出生年月不能为空！', 'info')
          return false
        } else if (!this.cusIdentify) {
          window.globalUiKit.notify('提示', '身份证号码不能为空！', 'info')
          return false
        } else if (!this.cusCertTerm) {
          window.globalUiKit.notify('提示', '证件有效期不能为空！', 'info')
          return false
        } else if (!this.cusAddress) {
          window.globalUiKit.notify('提示', '联系地址不能为空！', 'info')
          return false
        } else if (!this.cusCountry) {
          window.globalUiKit.notify('提示', '国籍不能为空！', 'info')
          return false
        } else if (this.professionValue.length == 0) {
          window.globalUiKit.notify('提示', '职业种类不能为空！', 'info')
          return false
        } else if (!this.cusTel) {
          window.globalUiKit.notify('提示', '联系电话不能为空！', 'info')
          return false
        }
        // 更新客户信息
        if ('cusCode' == code) {
          this.cusTelFlag = true
          let cusObj = {
            'customerName': this.cusName,
            'sex': this.cusSex,
            'nation': this.cusNation,
            'cusNationName': this.cusNationName,
            'birth': this.cusBirthDate,
            'idCardNo': this.cusIdentify,
            'validDate': this.cusCertTerm,
            'address': this.cusAddress,
            'tel': this.cusTel,
            'profession': this.professionValue[0],
            'childProFession': this.professionValue[1],
            'country': this.cusCountry,
            'professionName': this.professionName[0],
            'childProFessionName': this.professionName[1],
            'countryName': this.cusCountryName
          }
          globalUserData.sendUpdateCusInfo(cusObj)
        }
        // 发送短信验密码
        else {
          let code = Math.random().toFixed(6).slice(-6)
          globalUserData.sendSmsCode(this.cusTel, code)
          this.sendCodeMessageFun(this.cusTel, code)
          this.start()
        }
      },
      // 更新后的客户信息发送给客户
      sendToCusInfo() {
        let cusObj = {
          'customerName': this.cusName,
          'sex': this.cusSex,
          'nation': this.cusNation,
          'cusNationName': this.cusNationName,
          'birth': this.cusBirthDate,
          'idCardNo': this.cusIdentify,
          'validDate': this.cusCertTerm,
          'address': this.cusAddress,
          'tel': this.cusTel,
          'profession': this.professionValue[0],
          'childProFession': this.professionValue[1],
          'country': this.cusCountry,
          'professionName': this.professionName[0],
          'childProFessionName': this.professionName[1],
          'countryName': this.cusCountryName
        }
        if (!this.cusName) {
          window.globalUiKit.notify('提示', '姓名不能为空！', 'info')
          return false
        } else if (!this.cusSex) {
          window.globalUiKit.notify('提示', '性别不能为空！', 'info')
          return false
        } else if (!this.cusNation) {
          window.globalUiKit.notify('提示', '民族不能为空！', 'info')
          return false
        } else if (!this.cusBirthDate) {
          window.globalUiKit.notify('提示', '出生年月不能为空！', 'info')
          return false
        } else if (!this.cusIdentify) {
          window.globalUiKit.notify('提示', '身份证号码不能为空！', 'info')
          return false
        } else if (!this.cusCertTerm) {
          window.globalUiKit.notify('提示', '证件有效期不能为空！', 'info')
          return false
        } else if (!this.cusAddress) {
          window.globalUiKit.notify('提示', '联系地址不能为空！', 'info')
          return false
        } else if (!this.cusCountry) {
          window.globalUiKit.notify('提示', '国籍不能为空！', 'info')
          return false
        } else if (this.professionValue.length == 0) {
          window.globalUiKit.notify('提示', '职业种类不能为空！', 'info')
          return false
        } else if (!this.cusTel) {
          window.globalUiKit.notify('提示', '联系电话不能为空！', 'info')
          return false
        }
        globalUserData.sendUpdateCusInfo(cusObj)
      },
      // 短信验证码成功
      sendCodeSuccess() {
        this.codeSuccessFlag = true
        this.codeFailFlag = false
      },
      // 短信验证码失败
      sendCodeFail() {
        this.codeFailFlag = true
        this.codeSuccessFlag = false
      },
      // 上一步
      prev2to4() {
        this.flag2to3 = true
        this.flag2to4 = false
        this.codeSuccessFlag = false
        this.codeFailFlag = false
        this.cusTelFlag = false
        window.clearInterval(this.timer)
      },
      // 步骤2-4, 跳转客户设置交易密码页面
      next2to4() {
        this.flag2to4 = false
        this.flag3to1 = true
        this.nextStep(2)
        // 设置交易密码
        globalUserData.sendSetPass()
      },
      // 步骤3-2, 客户输入限额
      next3to2() {
        this.flag3to1 = false
        this.flag3to2 = true
      },
      // 步骤3-3， 设置交易密码成功
      next3to3() {
        this.flag3to1 = false
        this.flag3to3 = true
        // 3秒后跳转开通业务页面
        setTimeout(() => {
          this.flag3to3 = false
          this.flag4to1 = true
          this.nextStep(3)
        }, 3000)
      },

      // 步骤4-1， 客户正在开通业务
      next4to1() {
        this.flag4to2 = false
        this.flag4to1 = true
        globalUserData.sendReOpenBiz()
      },
      // 步骤4-2， 座席确认选择开通的业务
      next4to2() {
        this.flag4to1 = false
        this.flag4to2 = true
      },
      // 步骤4-3， 告知书
      next4to3() {
        this.flag4to2 = false
        this.flag4to3 = true
        globalUserData.sendOpenBizConfirm()
      },
      // 步骤5-1， 业务确认单
      next5to1() {
        this.flag4to3 = false
        this.flag5to1 = true
        this.nextStep(4)
        globalUserData.sendBizConfirmForm()
      },
      // 客户签名提交
      signSubmitAction() {
        this.reSignFlag = true
        this.bizFormFlag = true
      },
      // 重新签名
      reSignAction() {
        this.reSignFlag = false
        this.bizFormFlag = false
        this.cusSignUrl = ''
        globalUserData.sendReSign()
      },
      // 业务确认单提交(卡激活)
      bizFromConfirmAction() {
        this.bizFromConfirmFlag = true
        // 社保卡激活
        if ('1' == this.cardType) {
          this.socialCardActiveFun()
        }
        // 借记卡激活
        else {
          this.submitBizFormFun()
        }
      },
      // 步骤5-2， 客户提交申请失败
      cardActiveFail() {
        this.flag5to1 = false
        this.flag5to2 = true
        this.bizFromConfirmFlag = false
      },
      // 步骤5-3， 卡激活成功
      cardActiveSuccess() {
        this.flag5to1 = false
        this.flag5to3 = true
        this.bizFromConfirmFlag = false
      },
      // 步骤6-1，凭证签名
      next6to1() {
        this.flag5to3 = false
        this.flag6to1 = true
        this.nextStep(5)
        // 流水号
        this.bizCertData.coreSeqNo = sessionStorage.getItem('coreSeqNo')
        // 姓名
        this.bizCertData.name = sessionStorage.getItem('customerName')
        // 证件类型
        this.bizCertData.certType = '身份证'
        // 民族
        this.bizCertData.nation = this.cusNationName
        // 证件号码
        this.bizCertData.idNum = sessionStorage.getItem('idCardNo')
        // 联系电话
        this.bizCertData.tel = this.cusTel
        // 联系地址
        this.bizCertData.address = this.cusAddress
        // 大类职业
        this.bizCertData.profession = this.professionName[0]
        // 中类职业
        this.bizCertData.childProFession = this.professionName[1]
        // 国籍
        this.bizCertData.country = this.cusCountryName
        // 正面照
        this.bizCertData.frontPhoto = this.frontUrl
        // 反面照
        this.bizCertData.backPhoto = this.reverseUrl
        // 联网核查结果
        this.bizCertData.onlineResult = '公民身份证号码与姓名一致，且存在照片'
        // 人脸识别分数
        this.bizCertData.faceScore = sessionStorage.getItem('score')
        // 活体检测结果
        this.bizCertData.liveResult = sessionStorage.getItem('onlineResult')
        // 信息维护
        this.bizCertData.informationMaintenance = this.isUpdateFlag
        // 业务类型
        this.bizCertData.businessType = sessionStorage.getItem('businessType')
        // 客户签名
        this.bizCertData.signUrl = this.cusSignUrl
        // 经办人
        this.bizCertData.manager = Constants.Agent.agentName
        // 经办人工号
        this.bizCertData.managerNum = Constants.Agent.agentId
      },
      // 发送业务凭证
      sendBizCertToClient() {
        let certObj = this.bizCertData
        globalUserData.sendBizCertAndSign(certObj)
      },
      // 步骤6-2，提交结果
      next6to2() {
        let self = this
        html2canvas(document.querySelector("#bizCertCanvas"), {
          useCORS: true,
          allowTaint: false
        }).then(function (canvas) {
          console.log('biz cert canvas is: ' + canvas.toDataURL())
          self.dialogVisible = true
          self.bizCertUrl = canvas.toDataURL()
        }).catch(error => {
          console.log(error)
        })
      },
      // 生成电子凭证
      next6to3() {
        let self = this
        html2canvas(document.querySelector("#bizCertCanvas"), {
          useCORS: true,
          allowTaint: false
        }).then(function (canvas) {
          console.log('biz cert canvas is: ' + canvas.toDataURL())
          self.bizCertUrl = canvas.toDataURL()
          self.uploadFileFun()
        }).catch(error => {
          console.log(error)
        })
      },
      // 交易结束（公用）
      nextEnd() {
        if (!this.flagEnd) {
          this.saveTransPipelineFun()
        }
        this.flag2to2 = false
        this.endTransFlag = false
        this.flagEnd = true
        this.resetGlobalVarible()
        Constants.ModelChat = {}
        globalUserData.sendEndTransaction()
      },
      // 获取职业种类name
      handleProfessFun(item) {
        this.professionName = this.$refs.professionForm.getCheckedNodes()[0].pathLabels
      },
      // 获取国籍name
      getCountryName(val) {
        this.cusCountryName = window.DICJSON.COUNTRY.find(ele => ele.value === val).label || ''
      },
      // 获取民族name
      getNationName(val) {
        this.cusNationName = this.nationOptions.find(ele => ele.key === val).value || ''
      },
      // 获取民族字典接口
      nationDicFun() {
        nationDicList({paramId: 'nation'}).then(res => {
          if (200 == res.data.code) {
            this.nationOptions = res.data.data
          } else {
            this.nationOptions = [{key: '1', value: '汉族'}]
          }
        }).catch(error => {
          console.log(error)
          window.globalUiKit.notify('提示', '获取民族字典失败！', 'error')
        })
      },
      // 联网查询分数
      queryCusSenceScoreFun(cusSenceUrl) {
        cusSenceUrl = cusSenceUrl.substring(cusSenceUrl.indexOf('base64,') + 'base64,'.length, cusSenceUrl.length)
        let params = {
          'biologicalImgOne': cusSenceUrl,
          'biologicalImgOneType': '',
          'customerName': sessionStorage.getItem('customerName'),
          'customerNo': '',
          'customerType': '',
          'idCardNo': sessionStorage.getItem('idCardNo'),
          'idCardType': '',
          'netCheckImg': '',
          'netCheckImgType': '',
          'netCheckStatus': ''
        }
        queryCusSenceScore(params).then(response => {
          let data = response.data
          if (200 == data.code && data.data) {
            this.score = data.data.IdnfScore
            sessionStorage.setItem('score', this.score)
            if (parseFloat(this.score) >= 0.9) {
              this.scoreColor = 'greenColor'
              this.onlineResult = '通过'
              this.levelRisk = '低风险'
              sessionStorage.setItem('onlineResult', this.onlineResult)
            } else {
              this.scoreColor = 'redColor'
              this.onlineResult = '由坐席确认是否通过'
              this.levelRisk = '高风险'
              sessionStorage.setItem('onlineResult', this.onlineResult)
            }
          } else {
            this.score = 0.001
            this.scoreColor = 'redColor'
            this.onlineResult = '由坐席确认是否通过'
            this.levelRisk = '高风险'
            sessionStorage.setItem('score', this.score)
            sessionStorage.setItem('onlineResult', this.onlineResult)
            window.globalUiKit.alert('联网查询分数失败', '失败原因：' + data.message)
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 客户信息查询
      queryCusInfoFun: function (customerNo) {
        let params = {
          'customerName': '',
          'customerNo': customerNo,
          'idCardNo': '',
          'idCardType': ''
        }
        // 是否有客户信息判断
        this.clientFlag = true
        queryCusInfo(params).then(response => {
          let data = response.data
          console.log('response cus info data is: ' + JSON.stringify(data))
          if (200 == data.code && data.data) {
            // 客户基本信息显示位置
            let cusSex = ''
            if ('0' == data.data.Gender) {
              cusSex = '未知'
            } else if ('1' == data.data.Gender) {
              cusSex = '男'
            } else if ('2' == data.data.Gender) {
              cusSex = '女'
            } else if ('9' == data.data.Gender) {
              cusSex = '未说明'
            }
            // 更新客户信息显示位置
            this.cusName = data.data.CstNm || this.ocrCusInfoData.ocrName
            this.cusSex = cusSex || this.ocrCusInfoData.ocrSex
            this.cusNation = data.data.Nation
            this.cusNationName = data.data.NationVal || this.ocrCusInfoData.ocrNation
            this.cusBirthDate = data.data.BirthDt || this.ocrCusInfoData.ocrBirthDate
            this.cusIdentify = data.data.IdentNo || this.ocrCusInfoData.ocrIdentify
            this.cusCertTerm = data.data.IdentIssuDt + '_' + data.data.InvalDt || this.ocrCusInfoData.ocrCertTerm
            this.cusTel = data.data.CtcTel
            this.cusAddress = data.data.CtcAdr || this.ocrCusInfoData.ocrAddress
            this.professionValue = [data.data.OcpCd, data.data.ScdLvlOcpCd]
            this.cusCountry = data.data.NtntyCd
            this.professionName = [data.data.OcpCdVal, data.data.ScdLvlOcpCdVal]
            this.cusCountryName = data.data.NtntyCdVal
            this.tellerNo = data.data.UdtTlrNo
            if (this.cusName && this.cusSex && this.cusNation && this.cusBirthDate && this.cusIdentify && this.cusCertTerm && this.cusAddress && this.cusCountry && this.professionValue.length > 0 && this.cusTel) {
              this.tradePwdFlag = false
            } else {
              this.tradePwdFlag = true
            }
          } else {
            // 512代表该客户无客户信息
            if (512 == data.code) {
              this.clientFlag = false
            }
            this.ocrCusInfoDataFun()
            window.globalUiKit.alert('客户基本信息查询失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
          }
        }).catch(error => {
          console.log(error)
          this.ocrCusInfoDataFun()
        })
      },
      // 客户信息默认获取身份证件接口字段
      ocrCusInfoDataFun() {
        this.tradePwdFlag = true
        this.cusName = this.ocrCusInfoData.ocrName
        this.cusSex = this.ocrCusInfoData.ocrSex
        this.cusNationName = this.ocrCusInfoData.ocrNation
        this.cusBirthDate = this.ocrCusInfoData.ocrBirthDate
        this.cusIdentify = this.ocrCusInfoData.ocrIdentify
        this.cusCertTerm = this.ocrCusInfoData.ocrCertTerm
        this.cusAddress = this.ocrCusInfoData.ocrAddress
      },
      // 新增或更新客户信息
      addAndUpdateCusInfoFun() {
        let sex = ''
        if (this.cusSex == '男') {
          sex = '1'
        } else if (this.cusSex == '女') {
          sex = '2'
        } else {
          sex = ''
        }
        let cusCertTerm = ''
        if (this.cusCertTerm) {
          cusCertTerm = this.cusCertTerm.split('_')
        }
        let params = {
          'customerNo': sessionStorage.getItem('customerNo'),
          'customerName': this.cusName,
          'sex': sex,
          'nation': this.cusNation,
          'birthday': this.cusBirthDate,
          'idCardNo': this.cusIdentify,
          'idCardType': '1',
          'idCardIssueDate': cusCertTerm[0],
          'idCardInvalidDate': cusCertTerm[1],
          'contactAdr': this.cusAddress,
          'contactTel': this.cusTel,
          'occupationCode': this.professionValue[0],
          'scdLvlOcpCd': this.professionValue[1],
          'nationality': this.cusCountry,
          'transactionType': this.clientFlag ? '2' : '1',   // 交易类型 1 新增 2 更新 4删除
          'updateTellerNo': this.tellerNo,  // 更新操作员 UdtTlrNo
          // 以下字段全部为空
          'authority': '', // 证件签发机关
          'corporationName': '', // 工作单位/公司
          'declarationFlg': '', // 声明标识
          'educationLevel': '', // 教育程度
          'email': '', // 邮箱
          'employeeFlg': '', // 员工标志
          'establishBrId': '', // 建立机构号
          'establishDate': '', // 建立日期
          'establishTellerNo': '', // 建立柜员
          'lastUpdateDate': '', // 最新更新日期
          'maritalStatus': '', // 婚姻状况
          'residenceAddress': '', // 户籍地址
          'residentFlg': '', // 居民标识
          'shareholderFlg': '' // 股东标志
        }
        updateCusInfo(params).then(response => {
          let data = response.data
          let message = this.clientFlag ? '更新' : '新增'
          console.log('response update cus info data is: ' + JSON.stringify(data))
          if (200 == data.code) {
            this.flag2to3 = false
            this.flag2to4 = true
            window.globalUiKit.notify('提示', '客户信息' + message + '成功！', 'success')
          } else {
            window.globalUiKit.alert('客户信息' + message + '失败！', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 客户照片转base64位
      imgTransBase64Fun() {
        imgTransBase64(this.frontName).then(response => {
          this.frontBase64 = response.data
        }).catch(error => {
          console.log(error)
        })
        imgTransBase64(this.reverseName).then(response => {
          this.reverseBase64 = response.data
        }).catch(error => {
          console.log(error)
        })
        imgTransBase64(this.mediaCardName).then(response => {
          this.mediaCardBase64 = response.data
        }).catch(error => {
          console.log(error)
        })
      },
      /********************************* 社保卡激活 ***************************************/
      // 社保卡激活开通
      socialCardActiveFun: function () {
        let param = {
          'address': this.cusAddress,
          'cardNo': sessionStorage.getItem('bankCardNo'),
          'custName': this.cusName,
          'flag': this.khflag,
          'idCardNo': sessionStorage.getItem('idCardNo'),
          'idCardType': '1',
          'password': sessionStorage.getItem('password'),
          'phone': this.cusTel,
          'oldsmkkh': this.oldsmkkh,
          'lcybh': this.lcybh,
          'branchCode': this.branchCode
        }
        socialCardActive(param).then(response => {
          let data = response.data
          console.log('response social card active data is: ' + JSON.stringify(data))
          if (200 == data.code) {
            sessionStorage.setItem('coreSeqNo', data.data.hostSerial)
            sessionStorage.setItem('tranDate', data.data.tranDate)
            sessionStorage.setItem('tranTime', data.data.tranTime)
            this.cardActiveFlag = true
            // 互联网开通标志
            let params = {
              'acctName': sessionStorage.getItem('customerName'),
              'cardNo': sessionStorage.getItem('bankCardNo'),
              'idCardNo': sessionStorage.getItem('idCardNo'),
              'idCardType': '1',
              'opnFlg': this.openBizData.item3 ? '0' : '1'
            }
            onlinePayOpen(params).then(response => {
              let data = response.data
              console.log('response online pay open data is: ' + JSON.stringify(data))
              if (200 == data.code && data.data) {
                this.cardActiveSuccess()
                globalUserData.sendBizFormSuccess()
              } else {
                this.failReason = data.message
                this.cardActiveFail()
                globalUserData.sendBizFormFail(data.message)
                window.globalUiKit.alert('互联网开通失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
              }
            }).catch(error => {
              console.log(error)
              window.globalUiKit.alert('互联网开通失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
            })
          } else {
            this.cardActiveFlag = false
            this.failReason = data.message
            this.cardActiveFail()
            globalUserData.sendBizFormFail(data.message)
            window.globalUiKit.alert('社保卡激活失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(param))
          }
        }).catch(error => {
          this.cardActiveFlag = false
          console.log(error)
          window.globalUiKit.alert('社保卡激活失败', '失败原因：' + error + '；入参：' + JSON.stringify(param))
        })
      },
      // 借记卡激活
      submitBizFormFun: function () {
        let params = {
          'atmTransferOpnFlg': this.openBizData.item1 ? '1' : '0',
          'bankCardNo': sessionStorage.getItem('bankCardNo'),
          'icCardSerialNo': '',
          'idCardNo': sessionStorage.getItem('idCardNo'),
          'password': sessionStorage.getItem('password'),
          'reservePhoneNum': sessionStorage.getItem('contactTel'),
          'tellerNo': '',
          'thirdPayOpnFlg': this.openBizData.item3 ? '0' : '1',
          'tradingChannelFlg': '',
          'transactionBranchId': '',
          'transferPerDay': this.openBizData.item2,
          'twoTrackInfo': '',
          'oldsmkkh': this.oldsmkkh,
          'lcybh': this.lcybh
        }
        console.log('request submit biz form data: ' + JSON.stringify(params))
        submitBizForm(params).then(response => {
          let data = response.data
          console.log('response submit biz form data: ' + JSON.stringify(data))
          if (200 == data.code && data.data) {
            sessionStorage.setItem('coreSeqNo', data.data.CoreSeqNo)
            sessionStorage.setItem('tranDate', data.data.tranDate)
            sessionStorage.setItem('tranTime', data.data.tranTime)
            this.cardActiveFlag = true
            // 互联网开通标志
            let params2 = {
              'acctName': sessionStorage.getItem('customerName'),
              'cardNo': sessionStorage.getItem('bankCardNo'),
              'idCardNo': sessionStorage.getItem('idCardNo'),
              'idCardType': '1',
              'opnFlg': this.openBizData.item3 ? '0' : '1'
            }
            onlinePayOpen(params2).then(response => {
              let data = response.data
              console.log('response online pay open data is: ' + JSON.stringify(data))
              if (200 == data.code && data.data) {
                this.cardActiveSuccess()
                globalUserData.sendBizFormSuccess()
              } else {
                this.failReason = data.message
                this.cardActiveFail()
                globalUserData.sendBizFormFail(data.message)
                window.globalUiKit.alert('互联网开通失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params2))
              }
            }).catch(error => {
              console.log(error)
              window.globalUiKit.alert('互联网开通失败', '失败原因：' + error + '；入参：' + JSON.stringify(params2))
            })
          } else {
            this.cardActiveFlag = false
            this.failReason = data.message
            this.cardActiveFail()
            globalUserData.sendBizFormFail(data.message)
            window.globalUiKit.alert('借记卡激活失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
          }
        }).catch(error => {
          this.cardActiveFlag = false
          console.log(error)
          window.globalUiKit.alert('借记卡激活失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
        })
      },
      // 发送短信验证码
      sendCodeMessageFun: function (cusTel, code) {
        let params = {
          'content': '[客户信息更新],' + code + '（短信验证码），请勿向他人泄露。',
          'phone': cusTel,
          'agentName': Constants.Agent.agentName,
          'agentId': Constants.Agent.agentId,
          'smsType': '卡激活'
        }
        sendCodeMessage(params).then(response => {
          let data = response.data
          if (200 == data.code) {
            console.log('send code message success')
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 上传电子凭证照片
      uploadFileFun: function () {
        let bizCertBlob = Utils.dataURLtoBlob(this.bizCertUrl)
        let formData = new FormData()
        formData['enctype'] = 'multipart/form-data'
        formData.append('file', bizCertBlob)
        uploadFile(formData).then(response => {
          console.log('response biz cert link is: ' + response.data)
          this.bizCertName = response.data
          this.submitTransImgUploadFun()
        }).catch(error => {
          console.log(error)
          this.submitTransImgUploadFun()
        })
      },
      // 提交业务凭证到影像平台（暂未用到）
      submitBizCertFun: function () {
        this.dialogVisible = false
        let params = {
          "fileInfos": [{
            "fileType": "身份证正面",
            "fileTypeCode": "2601001",
            "fileUrl": this.frontName
          }, {
            "fileType": "身份证反面",
            "fileTypeCode": "2601002",
            "fileUrl": this.reverseName
          }, {
            "fileType": "卡片",
            "fileTypeCode": "2601003",
            "fileUrl": this.mediaCardName
          }, {
            "fileType": "客户现场照",
            "fileTypeCode": "2601004",
            "fileUrl": this.cusSceneName
          }, {
            "fileType": "凭证",
            "fileTypeCode": "2601005",
            "fileUrl": this.bizCertName
          }],
          "filePartName": "ZNKFKJHP",
          "modeCode": "ZNKFKJH",
          "modelName": "卡激活",
          "sessionId": Constants.ModelChat.sid
        }
        console.log('request submit biz cert data: ' + JSON.stringify(params))
        submitBizCert(params).then(response => {
          let data = response.data
          console.log('response submit biz form data: ' + JSON.stringify(data))
          this.bizCertSeqNo = data.data
          if (200 == data.code) {
            this.flag6to1 = false
            this.flag6to2 = true
            globalUserData.sendBizSuccess()
          } else {
            this.flag6to1 = false
            this.flag6to3 = true
            globalUserData.sendBizFail()
            this.certFailReason = data.message
            window.globalUiKit.notify('提示', '提交电子凭证失败', 'error')
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 保存影像平台交易流水
      submitTransImgUploadFun() {
        this.dialogVisible = false
        this.flag6to1 = false
        this.flag6to2 = true
        globalUserData.sendBizSuccess()
      },
      // 记录交易流水
      saveTransPipelineFun: function () {
        let params = {
          'transactionDate': sessionStorage.getItem('tranDate'),
          'transactionTime': sessionStorage.getItem('tranTime'),
          'transactionNo': sessionStorage.getItem('coreSeqNo'),
          'agentName': Constants.Agent.agentName,
          'agentNo': Constants.Agent.agentId,
          'channelType': Constants.ModelChat.chatType,
          'sessionId': Constants.ModelChat.sid,
          'businessType': '卡激活',
          'openBankName': sessionStorage.getItem('openingBank'),
          'customerName': sessionStorage.getItem('customerName'),
          'idCardType': '身份证',
          'idCardNo': sessionStorage.getItem('idCardNo'),
          'cardNo': sessionStorage.getItem('bankCardNo'),
          'accountName': sessionStorage.getItem('customerName'),
          'transactionAmount': this.openBizData.item2 ? this.openBizData.item2 : 0,
          'transactionStatus': this.cardActiveFlag ? '成功' : '失败',
          'errorMsg': this.failReason,
          'isSatisfaction': '',
          'docidNo': Constants.ModelChat.sid,
          'filePartName': 'ZNKFKJHP',
          'modelCode': 'ZNKFKJH',
          'frontImge': this.frontName,
          'backImge': this.reverseName,
          'csImge': this.cusSceneName,
          'businessImge': this.bizCertName,
          'card': this.mediaCardName,
          'uploadFlag': 'img',
          'transactionStatus': this.cardActiveFlag ? '成功' : '失败'
        }
        console.log('request save trans pipeline data: ' + JSON.stringify(params))
        saveTransPipeline(params).then(response => {
          let data = response.data
          console.log('response save trans pipeline data: ' + JSON.stringify(data))
          if (200 == data.code) {
            console.log('记录交易流水成功')
            window.globalUiKit.notify('提示', '视频交易流水记录成功！', 'success')
          } else {
            console.log('记录交易流水失败')
            window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
          }
        }).catch(error => {
          console.log(error)
          window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
        })
      },
      // 全局变量重置
      resetGlobalVarible: function () {
        this.frontUrl = 'assets/theme/img/viceoBiz/frontPhoto.png'
        this.reverseUrl = 'assets/theme/img/viceoBiz/reversePhoto.png'
        this.cusSceneUrl = 'assets/theme/img/viceoBiz/perpr.png'
        this.cusSceneName = ''
        this.mediaCardUrl = 'assets/theme/img/viceoBiz/cardMedia.png'
        this.frontUrlList = []
        this.reverseUrlList = []
        this.mediaCardUrlList = []
        this.cusSignUrl = ''
        this.frontName = ''
        this.reverseName = ''
        this.mediaCardName = ''
        this.frontBase64 = ''
        this.reverseBase64 = ''
        this.mediaCardBase64 = ''
        this.cusSignBase64 = ''
        this.bankCardNo = ''
        this.score = 0
        this.levelRisk = '高风险'
        this.scoreColor = 'redColor'
        this.onlineResult = '由坐席确认是否通过'
        this.cardStatus = '借记卡未激活'
        this.cardType = '2'
        this.cardName = '借记卡'
        this.khflag = '0'
        this.clientFlag = true
        this.tellerNo = ''
        this.failReason = ''
        this.timer = ''
        this.tradePwdFlag = false
        this.cardActiveFlag = false
        this.isUpdateFlag = false
        this.flag2to3 = false
        this.flag2to4 = false
        this.flag2to5 = false
        this.flag3to1 = false
        this.flag3to2 = false
        this.flag3to3 = false
        this.flag4to1 = false
        this.flag4to2 = false
        this.flag4to3 = false
        this.flag5to1 = false
        this.flag5to2 = false
        this.flag5to3 = false
        this.flag6to1 = false
        this.flag6to2 = false
        this.flag6to3 = false
        this.reSignFlag = false
        this.bizFormFlag = false
        this.sendSignFlag = true
        this.submitResultFlag = false
        this.cusAddress = ''
        this.cusAddressFlag = false
        this.cusCountry = 'CHN'
        this.cusCountryName = '中国'
        this.professionValue = []
        this.professionName = []
        this.cusName = ''
        this.cusSex = ''
        this.cusNation = ''
        this.cusNationName = ''
        this.cusBirthDate = ''
        this.cusIdentify = ''
        this.cusCertTerm = ''
        this.cusTel = ''
        this.cusTelFlag = false
        this.codeFailFlag = false
        this.codeSuccessFlag = false
        this.openBizData.item1 = false
        this.openBizData.item2 = 0
        this.openBizData.item3 = false
        this.bizConfirmFlag = true
        this.transTime = ''
        this.bizFromConfirmFlag = false
        this.dialogVisible = false
        this.bizCertUrl = ''
        this.bizCertName = ''
        this.bizCertSeqNo = ''
        this.certFailReason = ''
        this.oldsmkkh = ''
        this.branchCode = ''
        this.lcybh = ''
        this.bizCertData = {
          // 流水号
          'coreSeqNo': '',
          // 姓名
          'name': '',
          // 证件类型
          'certType': '身份证',
          // 证件号码
          'idNum': '',
          // 民族
          'nation': '',
          // 联系电话
          'tel': '',
          // 大类职业
          'profession': '',
          // 中类职业
          'childProFession': '',
          // 国籍
          'country': '',
          // 联系地址
          'address': '',
          // 正面照
          'frontPhoto': this.frontUrl,
          // 反面照
          'backPhoto': this.reverseUrl,
          // 联网核查结果
          'onlineResult': this.onlineResult,
          // 人脸识别分数
          'faceScore': this.score,
          // 活体检测结果
          'liveResult': '',
          // 信息维护
          'informationMaintenance': this.isUpdateFlag,
          // 业务类型
          'businessType': sessionStorage.getItem('businessType'),
          // 客户签名
          'signUrl': '',
          // 经办人
          'manager': '',
          // 经办人工号
          'managerNum': ''
        }
        this.ocrCusInfoData = {
          ocrName: '',
          ocrSex: '',
          ocrNation: '',
          ocrBirthDate: '',
          ocrIdentify: '',
          ocrCertTerm: '',
          ocrAddress: ''
        }
        sessionStorage.removeItem('customerName')
        sessionStorage.removeItem('idCardType')
        sessionStorage.removeItem('idCardNo')
        sessionStorage.removeItem('contactTel')
        sessionStorage.removeItem('contactAdr')
        sessionStorage.removeItem('password')
        sessionStorage.removeItem('coreSeqNo')
        sessionStorage.removeItem('tranDate')
        sessionStorage.removeItem('tranTime')
        sessionStorage.removeItem('bankCardNo')
        sessionStorage.removeItem('customerNo')
        sessionStorage.removeItem('businessType')
        sessionStorage.removeItem('openingBank')
        sessionStorage.removeItem('videoCallType')
      },
      // 60s计时器
      start() {
        let _this = this
        let second = 60
        _this.timer = setInterval(function () {
          if (second > 0) {
            second = second - 1
            _this.callinTime = second + 's后可发送'
            _this.cusTelFlag = true
          } else {
            _this.cusTelFlag = false
            window.clearInterval(_this.timer)
          }
        }, 1000)
      }
    },
    watch: {

    }
  }
</script>
<style scoped>
  .step-box {
    width: 100%;
    margin: 0 auto;
  }

  /************************************* 页面一 *********************************************/

  .greenColor {
    color: green;
  }

  .redColor {
    color: red;
  }

  .custom-id-title {
    text-align: center;
    margin: 15px 0;
  }

  .papers-photo {
    height: 186px;
    width: 274px;
  }

  .papers-photo .el-image {
    height: 100%;
    width: 100%;
  }

  .papers-photo img {
    height: 100%;
    width: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .site-identity-title {
    margin: 20px 0 15px 0;
    text-align: center;
  }

  .peror-photo {
    height: 200px;
    width: 186px;
    overflow: hidden;
  }

  .peror-photo img {
    height: 100%;
    width: 100%;
  }

  .search-result {
    margin: 30px 0 40px 0;
  }

  .per-result {
    margin: 10px 0;
  }

  .bottom-submit {
    text-align: center;
  }

  /************************************* 页面二 *********************************************/
  .page-box {
    height: 100%;
    width: 100%;
  }

  .page-bottom {
    text-align: center;
  }

  .left-box {
    height: 750px;
  }

  .right-box {
    height: 750px;
  }

  .left-top-header {
    text-align: center;
    margin: 30px 0 20px 0;
  }

  .card-media-photo {
    width: 349px;
    height: 190px;
    overflow: hidden;
  }

  .card-media-photo .el-image {
    height: 100%;
    width: 100%;
  }

  .card-media-photo img {
    height: 100%;
    width: 100%;
  }

  .left-top-bottom {
    text-align: center;
    margin: 30px 0 20px 0;
  }

  .cus-info-box {
    padding: 10px 0px;
  }

  .cus-info-title {
    text-align: center;
    font-weight: bold;
  }

  .cus-info-row {
    line-height: 30px;
    padding: 3px 10px;
  }

  .view-box {
    margin: 30px 0;
    border: 1px solid #d6d2d2;
    height: 675px;
  }

  .view-header {
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #eceeef;
  }

  .view-middle {
    height: 580px;
  }

  .view-middle-header {
    height: 250px;
  }

  .view-middle-bottom {
    height: 330px;
  }

  .sign-style {
    border: 1px dashed;
    height: 150px;
    margin-top: 15px;
    width: 100%;
  }

  .sign-style img {
    height: 100%;
    width: 100%;
  }

  .code-icon-fail {
    padding: 15px 0 0 25px;
    color: #ef1010;
  }

  .code-icon-success {
    padding: 15px 0 0 25px;
    color: #24ab05;
  }

  .code-padding {
    padding-left: 15px;
  }

  .open-biz-item {
    padding: 25px 0 0 60px;
  }

  .view-bottom {
    text-align: center;
    height: 55px;
    line-height: 55px;
  }

  .verify-item {
    padding: 15px 30px 0 30px;
  }

  .verify-item-ocr {
    padding: 30px 10px 0px 10px;
  }

  .verify-item-list {
    padding: 12px 0 0 0;
  }

  .photo-box {
    padding-top: 160px;
  }

  .photo-title {
    padding-top: 20px;
    text-align: center;
  }

  .pass-photo {
    width: 47px;
    height: 68px;
    margin: 0 auto;
  }

  .exceed-photo {
    width: 62px;
    height: 62px;
    margin: 0 auto;
  }

  .open-biz-photo {
    width: 52px;
    height: 58px;
    margin: 0 auto;
  }

  .signature-photo {
    width: 50px;
    height: 48px;
    margin: 0 auto;
  }

  .signature-photo-real {
    width: 150px;
    height: 100px;
    line-height: 100px;
    border: 1px solid;
    margin: 0 auto;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
  }

  .biz-cert-photo {
    width: 150px;
    height: 400px;
    line-height: 400px;
    border: 1px solid;
    margin: 0 auto;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
  }

  .success-photo {
    width: 60px;
    height: 60px;
    margin: 0 auto;
  }

  .word-border-style {
    font-weight: bold;
  }

  .confirmTable {
    padding: 10px 20px;
    width: 100%;
  }

  .confirmTitle {
    text-align: center;
    height: 34px;
    line-height: 34px;
    font-weight: bold;
  }

  .confirmTableBody {
    width: 100%;
    border: 2px solid #0c0c0c;
  }

  .padding-style {
    padding: 10px;
  }

  .border-bottom-style {
    border-bottom: 1px solid #909399
  }

  .border-right-style {
    border-right: 1px solid #909399
  }

  .border-left-style {
    border-left: 1px solid #909399
  }

  .border-bottom-bold-style {
    border-bottom: 2px solid #0c0c0c;
  }

  .confirmTableBFooter {
    padding: 5px;
  }

  .footer-style {
    padding: 4px;
  }

  .rules {
    color: red;
    font-size: 13px;
  }

  .line-height {
    line-height: 28px;
  }

</style>
